<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数式组件使用props</title>
  </head>
  <body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
      // (1),通过onxxx用性省定业件处理雨数(如onClick,onChange)
      //     a.React使用的足自定义(合成)率件，面不足性用的限TD0M平件为「更好的兼容性
      //     b.React小"的小件是通过事件委托方式处理的(委托给组件最外层的元素)
      // (2).和过cwent.target得销发生事件的D0M元素对象

      class Demo extends React.Component {
        input1 = React.createRef(); //创建ref对象
        showData = (event) => {
          const { input1 } = this;
          console.log("触发事件", input1.current.value);
          alert("event输入的内容是----：" + input1.current.value);
        };
        render() {
          return (
            <div>
              <input ref={this.input1} type="text" placeholder="请输入内容" />
              <button onClick={this.showData}>点我提示左侧的数据</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("test1"));
    </script>
  </body>
</html>
